
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 1000px;

  nav {
    height: 40px;
    line-height: 40px;
    background: #de2b10;
    color: white;
    text-align: center;
  }

  figure {
    width: 100%;
    position: relative;

    figcaption {
      width: 100%;
      position: absolute;
      color: white;
      font-size: 30px;

    }

    .player {
      width: 100%;

      video {
        width: 100%;
        background: black;
        object-fit: contain;

      }

      .controls {
        position: absolute;
        bottom: 10px;
        height: 30px;
        border-radius: 15px;
        background: transparent;
        display: flex;
        width: 80%;
        margin-left: 10%;
        background-color: rgba(255, 255, 0, 0.3);

        .play {
          height: 20px;
          width: 20px;
          text-align: center;
          display: block;
          line-height: 20px;
          margin-top: 5px;
          margin-left: 5px;
          color: yellow;
        }


        .progress {
          width: 100%;
          height: 100%;
          margin-left: 10px;
          margin-right: 10px;
          flex: 5;
          box-sizing: border-box;

          progress{
            width: 100%;
            height:10px;
          }

        }
        .time {
          box-sizing: border-box;
          height: 100%;
          padding-top: 5px;
          span{
            margin: 5px;
            line-height: 20px;
          }

        }
        .icon-resize-full {
          width: 30px;
          height: 30px;
          position: relative;
          padding: 5px;
          box-sizing: border-box;
        }

      }

    }

  }
}